<template>
  <div class="index box bg clmcenter">
    <form class="signfrm">
      <div class="sitem xmitem">
        <!-- <label>姓名</label>
        <input type="text" v-model="uname" class="sipt"> -->
        <div class="firstname">
          <label>姓氏</label>
          <input type="text" v-model="ufirstname" class="sipt" />
        </div>
        <div class="lastname">
          <label>名字</label>
          <input type="text" v-model="ulastname" class="sipt" />
        </div>
      </div>
      <div class="sitem">
        <label>手机号码</label>
        <input type="tel" maxlength="11" v-model="utel" class="sipt" />
      </div>
      <div class="sitem">
        <label>验证码</label>
        <div class="xmitem">
          <input type="number" class="sipt numcode" v-model="unumcode" />
          <button type="button" class="sipt getcode" @click="getCode">
            {{ codetips }}
          </button>
        </div>
      </div>
      <div class="sitem">
        <label>城市</label>
        <input
          type="text"
          class="sipt icon"
          v-model="ucity"
          readonly
          @click="chooseCity"
        />
        <van-popup v-model="cityflag" position="bottom" get-container="#app">
          <van-picker
            title=""
            show-toolbar
            item-height="70"
            :columns="citys"
            @confirm="cityConfirm"
            @cancel="cityCancle"
          />
        </van-popup>
      </div>
      <div class="sitem">
        <van-radio
          name="1"
          checked-color="#000000"
          icon-size="24px"
          class="radio"
          v-model="checkflag"
        >
          我已知晓本次活动规则及联合利华隐私条例。<br />
          确认接受联合利华信息。
        </van-radio>
      </div>
    </form>
    <button class="btn submit btnani" @click="putUserinfo">提 交</button>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      ufirstname: "", //姓氏
      ulastname: "", //名字
      utel: "", //手机号
      citys: ["北京", "上海", "广州", "深圳", "成都", "重庆"],
      cityflag: false,
      ucity: "", //城市
      unumcode: "",
      codetips: "获取验证码",
      checkflag: false,
    };
  },
  methods: {
    //城市
    chooseCity() {
      this.shoplist = [];
      this.shops = [];
      this.dts = [];
      this.shop = "";
      this.sdate = "";
      this.cityflag = true;
    },
    cityConfirm(value) {
      this.ucity = value;
      this.cityflag = false;
    },
    cityCancle() {
      this.cityflag = false;
    },
    getCode() {
      let myreg = /^1[3-9][0-9]{9}$/;
      if (this.utel == "") {
        Toast("请填写手机号！");
      } else if (!myreg.test(this.utel)) {
        Toast("手机号码不合法，请重新填写！");
      } else {
        this.$http
          .post("/getCheckCode", {
            mobile: this.utel,
          })
          .then((res) => {
            if (res.data.code === 200) {
              Toast("验证码获取成功！");
              let djs = 60;
              var ts = setInterval(() => {
                this.codetips = "重新获取(" + djs + ")S";
                djs--;
                if (djs <= 0) {
                  clearInterval(ts);
                  this.codetips = "获取验证码";
                }
              }, 1000);
            } else {
              Toast(res.data.msg);
            }
          });
      }
    },
    putUserinfo() {
      if (this.ucity == "" || this.utel == "" || this.unumcode == "") {
        Toast("请将信息填写完整！");
      } else if (!this.checkflag) {
        Toast("请勾选隐私协议！");
      } else {
        Toast.loading({
          message: "请稍后...",
          forbidClick: true,
          duration: 0, //值为 0 时，toast 不会消失
          overlay: true, //是否显示背景遮罩层
        });
        const params = {
          mobile: this.utel,
          city: this.ucity,
          code: this.unumcode,
        };
        this.$http.post("/register", params).then((res) => {
          Toast.clear();
          if (res.data.code === 200) {
            // Toast('注册成功！')
            this.$store.commit("getUserInfo", res.data.data);
          } else {
            Toast(res.data.msg);
          }
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.logo {
  width: 26%;
}
.slogan {
  width: 45%;
  margin-top: 4rem;
}
.signfrm {
  width: 76.8%;
  height: auto;
  margin-top: 3rem;
  .sitem {
    width: 100%;
    text-align: left;
    margin-bottom: 2.5rem;
    label,
    input,
    select {
      font-size: 1.9rem;
    }
    .select {
      text-align: center;
    }
    label {
      padding-left: 0.5rem;
    }
    .sipt {
      width: 100%;
      height: 70px;
      text-indent: 1rem;
      border: 2px solid #000000;
      box-sizing: border-box;
      border-radius: 12px;
      background: none;
      margin-top: 0.5rem;
    }
    .icon {
      // background: url("../assets/img/icon.png") no-repeat right center;
      background-size: 6% auto !important;
      background-position: right 4% top 1rem;
    }
    .radio {
      font-size: 1.5rem;
    }
  }
  .xmitem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .firstname {
      width: 35%;
    }
    .lastname {
      width: 55%;
    }
    .numcode {
      width: 60%;
    }
    .getcode {
      width: 35%;
      font-size: 1.8rem;
    }
  }
  .sitem:last-child {
    margin-bottom: 0;
  }
}
.submit {
  font-size: 2rem;
  padding: 1.2rem 5rem;
  border-radius: 8px;
  margin-top: 3rem;
}
@media only screen and (min-height: 1270px) {
  .signfrm {
    margin-top: 5rem;
  }
}
@media only screen and (min-height: 1350px) {
  .signfrm {
    .sitem {
      margin-bottom: 2.5rem;
    }
  }
  .submit {
    margin-top: 8rem;
  }
}
@media only screen and (min-height: 1440px) {
  .signfrm {
    margin-top: 6rem;
    .sitem {
      margin-bottom: 2.8rem;
    }
  }
  .submit {
    margin-bottom: 3rem;
  }
}
@media only screen and (min-height: 1480px) {
  .slogan {
    margin-top: 5rem;
  }
  .signfrm {
    margin-top: 7rem;
  }
  .submit {
    margin-top: 9rem;
    margin-bottom: 4rem;
  }
}
</style>
